<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/bankCardManage">银行卡管理&nbsp;&nbsp;>&nbsp;</router-link>
        <span>添加银行卡</span>
      </p>
      <p class="title first">姓名</p>
      <div class="d2 contents">
        <input type="text" v-model="userName" placeholder="请输入姓名" :disabled="disabled">
      </div>
      <p class="title">银行</p>
      <div class="d3 contents">
        <el-select v-model="selBank" placeholder="请选择币种" class="leftValue">
          <el-option
            v-for="item in bankList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <p class="title">卡号</p>
      <div class="d4 contents">
        <input type="text" placeholder="请输入卡号" v-model="cardNum">
      </div>
      <p class="title">开户行</p>
      <div class="d4 contents">
        <input type="text" placeholder="请输入开户行" v-model="openBankName">
      </div>
      <p class="sub">
        <button @click="sub">提交</button>
      </p>
    </section>
    <get-phonecode ref="phoneCodeRef" @confirm="confirmAdd" :openPhoneCode="1" :openTransPws="2"></get-phonecode>
    <confirm-dialog ref="dl" v-bind:msg="safeInfo" @confirm="sure()"></confirm-dialog>
  </div>
</template>
<script>
  import {getBankList, addBank, isRelNameVerify, ifNeedRechargeVerfy} from '../http/api';
  export default {
    name : 'addBank',
    data(){
      return{
        userName : null,//用户名
        bankList : [],
        getUserName : '',//ajax拿到的用户姓名
        disabled : true,//姓名disabled
        userType : 1,//用户类型：1 国内， 其他是海外
        selBank : null, //选择的银行id
        selBankName : null,//选择的银行名称
        cardNum : null,
        openBankName : null,
        verFyCode : null,
        safeInfo : require('../common/jsons/text').cashWithDrawVerification.html,//实名安全提示文字
      }
    },
    components:{
      ElSelect :  require('element-ui').Select, /*select*/
      ElOption : require('element-ui').Option, /*Option*/
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
      GetPhonecode : resolve => { require(['../components/GetMbcode'], resolve) },/*获取手机验证码弹窗*/
    },
    mounted() {
      let Not = { noToast : true , noLoading : true } , thiz = this;
      let https = [
        isRelNameVerify(Not).then(res => {
          if( res.code == 200){
            let data = res.data;
            thiz.userName = data.name;
            thiz.getUserName = data.name;
            let type = data.type;//用户类型
            thiz.userType = type;
            if( type != 1 ){
              thiz.disabled = false;
            }
          }
        }),
        ifNeedRechargeVerfy(Not).then(res => {
          //判断是否需要实名
          if (res.code == 200) {
            thiz.verFyCode = res.data;
          } else {
            thiz.verFyCode = 2
          }
        }),
        getBankList(Not).then(res => {
          if(res.code == 200){
            let list = res.data.lists;
            this.bankList = list;
            this.selBank = list[0].id;
            this.selBankName = list[0].name;
          }
        })
      ];
      this.PromiseAll(https);
    },
    methods:{
      sure() {
        //校验弹窗点击确定
        if (this.verFyCode === 2) {
          this.$router.push({path: '/verFyCode', query: {rechargeVerify: true}});
        }
      },
      cancel(){

      },
      sub(){
        let info = null;
        if( this.getUserName != this.userName && this.userType == 1){
          info = '国内用户不支持修改姓名';
        }else if(!this.cardNum){
          info = '请输入银行卡号';
        }else if(!this.openBankName){
          info = '请输入开户行';
        }
        if(info){
          require('../common/js/toast').toast(info);
          return;
        }
        this.$refs.phoneCodeRef.dialogShow();
      },
      confirmAdd(mbRes){
        let thiz = this;
        let selBank = thiz.selBank;
        let list = thiz.bankList;
        let bankName;
        thiz.for(list , (item , index) =>{
          if(item.id == selBank){
            bankName = item.name;
          }
        });
        let params = {
          smscaptcha : mbRes.code,
          id_name : thiz.userName,
          bank_card_no : thiz.cardNum,
          bank_khh_name : thiz.openBankName,
          swift_code :'123456',
          bank_name :  bankName,
          bank_id : thiz.selBank,
          noToast : true
        };
        addBank(params).then( res => {
          if( res.code == 200 ){
            require('../common/js/toast').toast('添加银行卡成功！');
            thiz.timeout(res => {
              thiz.$router.replace({path:'/bankCardManage'});
            },1000)
          }else if( res.code == 609 ){
            //未实名，前往实名
            //this.$refs.dl.dialogShow();
            require('../common/js/toast').toast('您还未实名认证');
          } else{
            require('../common/js/toast').toast(res.message)
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    min-height: 725px;
    input, /deep/ input{
      .input;width: 460px;height: 40px;padding: 0 9px;font-size: 14px;
    }
    >.title{
      color: #999;font-size: 14px;padding-top: 24px;
      &.first{
        padding-top: 56px;
      }
    }
    >.contents{
      padding-top: 15px;
    }
    >.d2{
      >input{
        .input;width: 460px;height: 40px;padding: 0 9px;
      }
    }
    >.sub{
      padding-top: 30px;
      >button{
        .submit;width: 160px;height: 38px;font-size: 16px;line-height: 38px;
      }
    }
  }
</style>
